<% htmlWebpackPlugin.options.headScripts = htmlWebpackPlugin.options.headScripts || [] %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="A admin dashboard application demo built upon Ant Design and Dva.js">
  <title>电子档案系统</title>
  <!--[if lte IE 10]>
      <script
        src="https://as.alipayobjects.com/g/component/?console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
  <![endif]-->
  <% for (item of htmlWebpackPlugin.options.headScripts) { %>
    <script src="<%= item %>"></script>
  <% } %>
	<!--<script src='./sample/js/main.js'></script>
	<script src='./sample/js/WebSocket.js'></script>
	<script src='./sample/js/globeVar.js'></script>-->
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body onload="load()" onunload="unload()">
  <div id="root"></div>
  <div id="photos" style="position: fixed; top: 250px;right: 100px;display: none;width: 600px;">
    <div style="width: 800px;height: 200px;">
    		<img id="myCanvas" width='320' height='240' style="background-color: black; float: left;"/>
		<button onclick="CaptureBase64()" style="margin-left: 10px;">拍照Base64</button>
		<button onclick="openDev()">开启摄像头</button>		
    </div>
    <div class="sideDiv" style="visibility:hidden;display: none">
		<button onclick="Capture()">拍照</button>
		<button onclick="closeDev()">关闭摄像头</button>
	</div>
    <div id="mainUI" style="visibility:hidden;display: none;">
		<!--canvas id="myCanvas" width='320' height='240' style="background-color: black; float: left;"></canvas-->   
		
		<div style="float: left; margin-left: 20px;">
			
			<span>存储路径</span>
			<input type="text"  id="saveText" value="C:\tmp" style="width: 150px;text-align: left;"/>
		
			
			<br/>
			
			<div class="sideDiv">
				
				<span>设置DPI</span>
				<span style="margin-left: 20px;">X</span>
				
				<input type="text" id="dpix" value="75" />
				
				<span style="margin-left: 20px;">Y</span>
				<input type="text" id="dpiy" value="75" />

			</div>
			<div class="sideDiv">
				
				<span>JPG质量</span>
				<input type="text" id="jpg" value="75" />
			</div>
		
			<div class="sideDiv">
				<span>手动裁切</span>
				<span style="margin-left: 10px;">左</span>
				<input type="text" value="0" id="left"/>
				<span style="margin-left: 10px;">上</span>
				<input type="text" value="0" id="top"/>
				<span style="margin-left: 10px;">右</span>
				<input type="text" value="0" id="right"/>
				<span style="margin-left: 10px;">下</span>
				<input type="text" value="0" id="bottom"/>
				
			</div>
			
			<br />
			<div class="sideDiv">
				
				<button onclick="Capture()">拍照</button>
				<button onclick="CaptureBase64()" style="margin-left: 10px;">拍照Base64</button>
			</div>
			
			<button onclick="closeDev()">关闭摄像头</button>
			<button onclick="openDev()">开启摄像头</button>
			
		</div>
		<div style="clear:both;">
			<div style="padding-top: 20px;">
				
					<span >设备</span>
					<select id="device" >
					</select>
				
				<div style="display: inline-block;margin-left: 20px;">
					<span >分辨率</span>
					<select name="" id="resoultion" >
					</select>
				</div>
				
				<div style="margin-left: 20px; display: inline-block;">
					<span >视频格式</span>
					<select id="videoStyle" >
					</select>
				</div>
			</div>
			
			<div style="margin-top: 20px;">
				
					<span >旋转类型</span>
					<select onchange="SetRotationStyle()" id="rotationStyle">
					<option >不旋转</option>
					<option >90</option>
					<option >180</option>
					<option >270</option>
					</select>
				<div style="display: inline-block;margin-left: 20px;">
					<span >裁切类型</span>
					<select onchange="SetCutStyle()" id="cutStyle" >
						<option >不裁切</option>
						<option >单图裁切</option>
						<option >多图裁切</option>
						<option >手动裁切</option>
						
					</select>
				</div>
				
				<div style="margin-left: 20px; display: inline-block;">
					<span >图像类型</span>
					<select id="imagestyle" onchange="SetImageStyle()">
						<option>jpg</option>
						<option>bmp</option>
						<option>png</option>
					</select>
				</div>
			</div>
			
		
		</div>
	</div>
	
	
	<div class="scan-ctrl" style="display: none;">
			<table border=0px align=center>
				<tr>
					<td valign=middle align=center>
						<a target=_blank href="http://www.unisscan.com">
							<img src="unis_logo.png" /></a>
					</td>
					<td>
						<div class="browser" id=wsdi_statustd>
							<a id=wsdi_txt>扫描仪连接未初始化</a>
							<div id=brow>
								<a id=brow_txt></a>
							</div>
							<div>
								<a id=OsVer></a>
							</div>
						</div>
					</td>
				</tr>
			</table>
			<a>扫描仪设置</a>
			<hr/>
			<div class="group">
				<div class="group-color">
					<br />
					<a>设备列表</a>
					<select id=alldsname class=alldsname style="width:240px;font-size:14px;" >
						<!--option value="Uniscan Q224X">Uniscan Q224x</option-->
					</select>
					<!--<br /><br />
					<a>扫描模式&nbsp;</a>
					<select id=scanmodel style="width:200px;font-size:14px;" >
						<option value="平板">平板</option>
						<option value="ADF正面">ADF双面</option>
						<option value="ADF正面">ADF单面</option>
					</select>
					<br /><br />
					<a>分辨率&nbsp;&nbsp; </a>
					<select id=dpi style="width:200px;font-size:14px;" >
						<option value="150">150DPI</option>
						<option value="200">200DPI</option>
						<option selected="selected" value="300">300DPI</option>
						<option value="600">600DPI</option>
						<option value="1200">1200DPI</option>
					</select>
					<br /><br />
					<a>色彩模式&nbsp;</a>
					<select id=colormodel style="width:200px;font-size:14px;" >
						<option>彩色</option>
						<option>灰度</option>
						<option>黑白</option>
					</select>
					<br /><br />
					<a>纸张大小&nbsp;</a>
					<select id=papersize style="width:200px;font-size:14px;" >
						<option>A4</option>
						<option>A5</option>
						<option>A6</option>
						<option>A6</option>
					</select>-->
					<br /><br />
					<a>文件格式&nbsp;</a>
					<select id=filetype style="width:240px;font-size:14px;" >
						<option value="JPG">JPG</option>
						<option value="BMP">TIF</option>
						<option value="PDF">PDF</option>
						<option value="PDF">多页PDF</option>
						<option value="PDF">多页TIF</option>
					</select>
					<!--<br /><br />
				    <a>图像质量&nbsp;</a>
					<select id=img_quality class="img_quality"  style="width:200px;font-size:14px;" >
					</select>
					<br /><br />
					<a>驱动高级设置：&nbsp;</a>
				    <input type="checkbox" id=isShowUI />
					<a >是否显示</a>-->
					<br /><br />
					<input type="button" id=idGetDsList value="获取扫描仪列表" onclick="getdslist()" style="width:320px;height:38px;">
					<br /><br />
					<input type="button" id=scan value="扫描" onclick="scan()" style="width:320px;height:38px;">
					<br /><br />
					<input type="button" id=scan value="上传" onclick="post()" style="width:320px;height:38px;">
					<br /><br />
					<br /><br />
					<a>Unis html 5 scanner app</a><br />
					<a>版本：Unis html 5 scanner app V0.1 </a><br />
					<a>版权：(c)2016 Unis</a>
				</div>
			</div>

		</div>
		<div class="blank_0">
			<div class="blank_1">
			</div>
			<div class="privew">
				<!--textarea id="result" style="width: 450px; height: 550px; "></textarea-->
				<img id=disimg src="" style="width: 450px; height: 550px; " />
			</div>
		</div>
  </div>

  
</body>

<script type="text/javascript">

	var a = 1;
	var ws = "";
	var m_isConnectWS = false;
	var m_splitTag = "$*$";
	var m_lastMessage = "";
	var m_imageDataH = 0;
	var m_imageDataW = 0;
	var m_imageDataS = 0;
	var m_stopWait = false; //同步等待
	var m_closed = false; //是否被关闭了
</script>
<script type="text/javascript">
	var timOut = 0;
function load(){
	
	StartWebSocket();
	
}

function unload(){
	
	if(m_closed){
		return;
	}
	clearInterval();
	sendWsMessage("uinitSdk");
}

function sendPreZoneSize(){
	
	var w = document.getElementById("myCanvas").width;
	var h = document.getElementById("myCanvas").height;
	sendWsMessage("PreZoneSize"+m_splitTag+String(w)+m_splitTag+String(h));
	
}

function openDev(){
	// console.log("1111111111")
	if(m_closed){
		
		StartWebSocket();
	}
	setTimeout(function(){
		
		sendPreZoneSize();
		sendWsMessage("OpenDevice" + m_splitTag+"0");
		

		timOut = setInterval(function(){
			ws.send("GetBuff");
		},200);
	
	sendWsMessage("GetDeviceCount");
	sendWsMessage("GetDeviceName");
		
	},500);
	
}


function startShowUI(){
	
	var loadwaitUi = document.getElementById("ld");
	loadwaitUi.style.display = "none";
	
	document.getElementById("mainUI").style.display = "block";
}

function showErrorUI(msg){
	
	var loadwaitUi = document.getElementById("ld");
	loadwaitUi.style.display = "none";
	
	document.getElementById("mainUI").style.display = "block";
	
	document.getElementById("disp").value = msg;
	
}

function configureDevInfo(names){	

	//设备名字
	var objSelect = document.getElementById("device");
	objSelect.options.length = 0;
	
	for (var i = 1; i < names.length;i++ ) {
	
		var op = new Option(names[i],i);
		objSelect.options[objSelect.length] = op;
		
	}

	//设置设备
	objSelect.onchange = function(){

		sendWsMessage("OpenDevice"+m_splitTag+String(objSelect.selectedIndex));
	}
	
}
	
function configureRestionInfo(names){
	
	var objSelect = document.getElementById("resoultion");
	objSelect.options.length = 0;
	
	for (var i = 1; i < names.length;i++ ) {
		if(names[i].length <=0){
			continue;
		}
		var op = new Option(names[i],i);
		objSelect.options[objSelect.length] = op;
		
	}

	//设置分辨率
	objSelect.onchange = function(){
		
		sendWsMessage("SetResolution"+m_splitTag+String(objSelect.selectedIndex));
	
	}
}

function configureVideoStyle(names){
	
	var objSelect = document.getElementById("videoStyle");
	objSelect.options.length = 0;
	
	for (var i = 1; i < names.length;i++ ) {
	
		var op = new Option(names[i],i);
		objSelect.options[objSelect.length] = op;
		
	}

	//设置视频格式
	objSelect.onchange = function(){
		
		sendWsMessage("SetMediaType"+m_splitTag+String(objSelect.selectedIndex));
	
	}
	
}

function setCanvasImageSize(w,h,s){
	
	m_imageDataH = h;
	m_imageDataS = s;
	m_imageDataW = w;
	
}
function setCavasImage(bytearray){
	
	var tempcanvas = document.getElementById("myCanvas");  
	
    var imageheight = m_imageDataH;  
    var imagewidth = m_imageDataW;  
    var tempcontext = tempcanvas.getContext('2d');  
    var imgdata = tempcontext.createImageData(imagewidth,imageheight);  
	imgdata.data.set(bytearray);
 /*
    for(var i = 0 ;i < imageheight * imagewidth * 4; i ++)	
    {
    	imgdata.data[i] = bytearray[i]; 	
    }
   /* for (var row = 0; row < imageheight; row++) {  
		for (var col = 0; col < imagewidth; col++) {  
		 	imgdata.data[((imagewidth * row) + col) * 4] = bytearray[((imagewidth * row) + col) * 4 + 2];  
			imgdata.data[((imagewidth * row) + col) * 4 + 1] = bytearray[((imagewidth * row) + col) * 4 + 1];  
			imgdata.data[((imagewidth * row) + col) * 4 + 2] = bytearray[((imagewidth * row) + col) * 4];  
			imgdata.data[((imagewidth * row) + col) * 4 + 3] = 255;  
			}  	
	}*/  
	//tempcontext.drawImage(img,0,0,imagewidth,imageheight,0,0,tempcanvas.style.width,tempcanvas.style.height);
    tempcontext.putImageData(imgdata,0,0,0,0,imagewidth,imageheight);
    
}

function Uint8ToString(u8a){
  var CHUNK_SZ = 0x8000;
  var c = [];
  for (var i=0; i < u8a.length; i+=CHUNK_SZ) {
    c.push(String.fromCharCode.apply(null, u8a.subarray(i, i+CHUNK_SZ)));
  }
  return c.join("");
}
function setImageWithBase64(str){

	var myimg = document.getElementById("myCanvas"); 
	myimg.src = "data:image/png;base64,"+str;
	
}



function SetRotationStyle(){
	var objSelect = document.getElementById("rotationStyle");
	sendWsMessage("SetRotateMode"+m_splitTag+String(objSelect.selectedIndex));
}
function SetCutStyle(){
	var objSelect = document.getElementById("cutStyle");
	sendWsMessage("SetCutMode"+m_splitTag+String(objSelect.selectedIndex));
}
function SetImageStyle(){
	
	var objSelect = document.getElementById("imagestyle");
	sendWsMessage("SetImageType"+m_splitTag+String(objSelect.selectedIndex));
	
}

function viewFolder(){
	
	var fileDir = document.getElementById("saveText").value;
	sendWsMessage("viewFolder"+m_splitTag+fileDir);
}

function openFolder(){
	var fileDir = document.getElementById("saveText").value;
	sendWsMessage("viewFolder"+m_splitTag+fileDir);
}

function setSavePath(path){
	
	document.getElementById("saveText").value = path;
	
}
//保存参数
function SavePara(){
	
	var x = document.getElementById("dpix").value;
	var y = document.getElementById("dpiy").value;
	var jpg = document.getElementById("jpg").value;
	var left = document.getElementById("left").value;
	var right = document.getElementById("right").value;
	var top = document.getElementById("top").value;
	var bottom = document.getElementById("bottom").value;
	
	sendWsMessage("SetImageDPI"+m_splitTag+x+m_splitTag+y); //DPI
	sendWsMessage("SetJPGQuanlity"+m_splitTag+jpg);   //JPG
	sendWsMessage("SetCusCropSize"+m_splitTag+left+m_splitTag+top+m_splitTag+right+m_splitTag+bottom); //Crop
	
}



function Capture(){
	
	var fileDir = document.getElementById("saveText").value;
	var fileStyle = document.getElementById('imagestyle').options[document.getElementById('imagestyle').selectedIndex].text;
	//SavePara();
	sendWsMessage("CaptureImage"+m_splitTag+fileDir+m_splitTag+fileStyle);
	
}
function CaptureBase64(){
	var fileDir = document.getElementById("saveText").value;
	var fileStyle = document.getElementById('imagestyle').options[document.getElementById('imagestyle').selectedIndex].text;
	SavePara();
	sendWsMessage("CaptureImageToBase64" + m_splitTag+fileDir+m_splitTag+fileStyle);
}
function showBase64info(str){
	// console.log('data:image/png;base64,'+str)
	sessionStorage.setItem("base64",'data:image/png;base64,'+str);
//	alert("Base64数据为："+ str);
}

function closeDev(){
	
	sendWsMessage("camCloseDev");
	
}




</script>
<script type="text/javascript">
	


//开启webSocket
function StartWebSocket(){
	 var url = "ws://localhost:9000/";

	if('WebSocket' in window){
//			console.log("WebSocket")
            ws = new WebSocket(url);
//      		console.log(ws)
    }
    else if('MozWebSocket' in window){
        ws = new MozWebSocket(url);
    }
   
	ws.onopen = function()
   {
// 	console.log(onopen)
   	  ws.binaryType = "arraybuffer" ; 
      m_isConnectWS = true;
      sendWsMessage("IsInit"); //初始化
	  m_closed = false;
   };
	
	
   ws.onmessage = function (evt) 
   { 
// 	console.log(onmessage)
   	
   	if(typeof(evt.data)=="string"){
   		
   		var str = evt.data;
   		
   		if(str.length <= 0){
   			
   			return;
   		}
   		
   		if(str.indexOf("imageHWS") >= 0){
   			
   			var strs= new Array(); //定义一数组 
			strs=str.split(m_splitTag); //字符分割 
   			setCanvasImageSize(strs[1],strs[2],strs[3]);
   			
   		}else {
			
			handleEveryMessage(str);
// 			console.log(str);
   		}
		
   		
   	}else{
   		
	       // var bytearray = new Uint8Array(evt.data);  
	        //setCavasImage(bytearray);
             // var b64encoded = btoa(Uint8ToString(bytearray));
             // setImageWithBase64(b64encoded);

   		}	
  
 	};
	
   ws.onclose = function()
   { 
// 	console.log(onclose)
      m_isConnectWS = false;
      clearInterval(timOut);
//    alert("连接中断");
   };
	
}

function sendWsMessage(msg){
	
	ws.send(msg);
}

function handleEveryMessage(str){
	
	if(str.indexOf("imageData")>=0){
		
		var strs= new Array(); 
		
		strs=str.split(m_splitTag); //分割设备名称 
		//alert(strs[1]);
		setImageWithBase64(strs[1]);
		
		return;
	}
	
	
	if(str == "IsInit_true"){

		// alert("初始化成功");
	}
	else if(str == "IsInit_false"){
		
		// alert("初始化失败");
	}
	else if(str == "open_true"){
		
		
		sendWsMessage("GetResolutionCount");
		sendWsMessage("GetResolution");
		sendWsMessage("GetMediaTypeCount");
		sendWsMessage("GetMedia");
		
		startShowUI();
	}
	else if(str.indexOf("DeviceName")>=0){
		
		var strs= new Array(); 
		
		strs=str.split(m_splitTag); //分割设备名称 
		configureDevInfo(strs);
		
		
	}else if(str.indexOf("ResoultionName")>= 0){
		
		var strs= new Array(); 
		
		strs=str.split(m_splitTag); //分割分辨率 
		configureRestionInfo(strs);
		
	}else if(str.indexOf("MediaName")>=0){
		
		var strs= new Array(); 
		
		strs=str.split(m_splitTag); //分割设备格式 
		configureVideoStyle(strs);
		
	}else if(str.indexOf("Base64Info")>=0){
		
		var strs= new Array(); 
		
		strs=str.split(m_splitTag); 
		showBase64info(strs[1]);
	}else if(str.indexOf("CaptureSuccess")>=0){
		
		var strs= new Array(); 
		
		strs=str.split(m_splitTag); 
		
		alert(strs[1]);
		
	}else if(str.indexOf("viewFolderSuccess")>=0){
		
		var strs= new Array(); 
		
		strs=str.split(m_splitTag); 
		
		setSavePath(strs[1]);
		
	}else if(str.indexOf("Error")>=0){
		
		var strs= new Array(); 
		
		strs=str.split(m_splitTag); //处理错误
		
//		console.log(strs[1]);
	}else if(str == "close_true"){
		alert("关闭成功");
	}else if(str == "close_false"){
		alert("关闭失败");
	}else if(str == "open_runing"){
		
		alert("我被关了");
		m_closed = true;
		//window.close();
		ws.close();
		
	}
	else {
		
		//console.log(str);
	}
	
	
}



</script>

<script >
	var sacnbase123=[]
		      /* BrowserDetect came from http://www.quirksmode.org/js/detect.html */
	var BrowserDetect = 
	{
		init: function() 
		{
			this.getOsVersion();  
			this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
			this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
			this.OS = this.searchString(this.dataOS) || "an unknown OS";
		},
		searchString: function(data) 
		{
			for (var i = 0; i < data.length; i++) 
			{
				var dataString = data[i].string;
				var dataProp = data[i].prop;
				this.versionSearchString = data[i].versionSearch || data[i].identity;
				if (dataString) {
					if (dataString.indexOf(data[i].subString) != -1) 
						return data[i].identity;
			}
			else if (dataProp) 
				return data[i].identity;
		  }
		},
		searchVersion: function(dataString) 
		{
			var index = dataString.indexOf(this.versionSearchString);
			if (index == -1) return;
			return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
		},
 
		dataBrowser: [{
		  string: navigator.userAgent,
		  subString: "Chrome",
		  identity: "Chrome"
		},
		{
			string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
		  string: navigator.vendor,
		  subString: "Apple",
		  identity: "Safari",
		  versionSearch: "Version"
		},
		{
		  prop: window.opera,
		  identity: "Opera",
		  versionSearch: "Version"
		},
		{
		  string: navigator.vendor,
		  subString: "iCab",
		  identity: "iCab"
		},
		{
		  string: navigator.vendor,
		  subString: "KDE",
		  identity: "Konqueror"
		},
		{
		  string: navigator.userAgent,
		  subString: "Firefox",
		  identity: "Firefox"
		},
		{
		  string: navigator.vendor,
		  subString: "Camino",
		  identity: "Camino"
		},
		{ // for newer Netscapes (6+)
		  string: navigator.userAgent,
		  subString: "Netscape",
		  identity: "Netscape"
		},
		{
		  string: navigator.userAgent,
		  subString: "MSIE",
		  identity: "Explorer",
		  versionSearch: "MSIE"
		},
		{
		  string: navigator.userAgent,
		  subString: "Gecko",
		  identity: "Mozilla",
		  versionSearch: "rv"
		},
		{ // for older Netscapes (4-)
		  string: navigator.userAgent,
		  subString: "Mozilla",
		  identity: "Netscape",
		  versionSearch: "Mozilla"
		}],
		dataOS: [{
		  string: navigator.platform,
		  subString: "Win",
		  identity: "Windows"
		},
		{
		  string: navigator.platform,
		  subString: "Mac",
		  identity: "Mac"
		},
		{
		  string: navigator.userAgent,
		  subString: "iPhone",
		  identity: "iPhone/iPod"
		},
		{
		  string: navigator.platform,
		  subString: "Linux",
		  identity: "Linux"
		}],
		//"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36"
		getOsVersion:function()
		{
			var osVersion = navigator.userAgent; 
			var listVersion = ["Windows NT 5.1","Windows NT 6.1","Windows NT 6.2","Windows NT 10.0"];
			var listVerName = ["Xp" , "7" , "8" ,"10"];
			if(navigator.platform  == "Win32")
			{
				for(var index =0; index < listVersion.length ;index++)
				{
					if( osVersion.search(listVersion[index]) != -1 )
					{
						this.osVersion = listVerName[index];
					}
				}
				if(osVersion.search("WOW64") != -1 || osVersion.search("Win64") != -1  ){
					this.osBit = "64";			
				}
				else{
					this.osBit = "32";
				}
			}
			else {
				this.osVersion = "";
				this.osBit ="";
			}

		}
	};
	BrowserDetect.init();
	document.getElementById("brow_txt").textContent = BrowserDetect.browser + " " + BrowserDetect.version 
													+" " +BrowserDetect.OS + " " +BrowserDetect.osVersion +" " + BrowserDetect.osBit;	
	//document.getElementById("OsVer").textContent     = BrowserDetect.OS + " " +BrowserDetect.osVersion +" " + BrowserDetect.osBit;
	//图像质量
	//var options = ['100', '90', '70', '60', '50'];
	//init_select('img_quality',options);
	
	function get_appropriate_ws_url() 
	{
		var pcol;
		var u = document.URL;
		/*
		* We open the websocket encrypted if this page came on an
		* https:// url itself, otherwise unencrypted
		*/
		if (u.substring(0, 5) == "https") {
			pcol = "wss://localhost:";
		} 
		else 
		{ 
			//pcol = "ws://localhost:";
			pcol = "ws://127.0.0.1:";
		}
		/* + "/xxx" bit is for IE10 workaround */
		pcol += "9866";
		return pcol;
	}

	//document.getElementById("number").textContent = get_appropriate_ws_url();

	/* dumb increment protocol */

	var socket_scan;

	if (typeof MozWebSocket != "undefined") {
		socket_scan = new MozWebSocket(get_appropriate_ws_url(), "scanner-h5-protocol");
	} 
	else {
		socket_scan = new WebSocket(get_appropriate_ws_url(), "scanner-h5-protocol");
	}

	try 
	{
		socket_scan.onopen = function() 
		{
			document.getElementById("wsdi_statustd").style.backgroundColor = "#15A848";
			document.getElementById("wsdi_txt").innerHTML = " 已连接扫描仪";// + BrowserDetect.browser + " " + BrowserDetect.version + " " +  BrowserDetect.OS ;
			//document.getElementById("disimg").src ="img-upload/leaf.jpg";


		}
		var total = 0;
		var imgBase64="";
		var total_files = 0;
		var saved_file;
		
		socket_scan.onmessage = function got_packet(msg) 
		{
			var dat = msg.data;
			// console.log(names)
//			console.log(dat)
//			console.log("msg from ws: " + dat);
			//return;
//			sessionStorage.removeItem("sacnbase64")
			var names12345 = [];
			jsonDat = JSON.parse(dat);
			if(jsonDat.type == "STATUS")
			{
				if(jsonDat.data == 'task_done')
				{
					console.log(jsonDat.data + ' 本次扫描得到的图像数:' + jsonDat.num);
				}
				else
					console.log(jsonDat.data);
			}
			else if(jsonDat.type == "FILE_NAME")
			{
				<!-- console.log("file name:" + jsonDat.filename); -->
				<!-- console.log("index:" + jsonDat.index); -->
				<!-- console.log("fragment:"+ jsonDat.fragment); -->
				<!-- console.log("base64 size:" + jsonDat.size); -->
				<!-- console.log("fragment size:" + jsonDat.base64.length); -->
				
				
				if(jsonDat.fragment == "WRITE_FIN")
				{
					total_files++;
					if(jsonDat.base64.length == jsonDat.size)
					{
						names12345.push(jsonDat.base64)
						sacnbase123.push(jsonDat.base64)
						saved_file = jsonDat.filename;
						// console.log('收到 :' + jsonDat.filename + ' siez:' + jsonDat.size + '共：' + total_files );
						var img = document.createElement('img');
						img.src = "data:image/jpg;base64,"+jsonDat.base64;
						img.width = 300;
						document.querySelector('.privew').appendChild(img);
						document.getElementById("disimg").src ="data:image/jpg;base64,"+imgBase64;
					}
					
					else
						console.log('接收完毕,校验失败');
					total = 0;
					//console.log(imgBase64);
					// console.log(names)
					imgBase64 = "";
					// sessionStorage.setItem("sacnbase64",JSON.stringify(names12345))
					// sessionStorage.setItem("sacnbase64",JSON.stringify(sacnbase123))
					// names = "";
				}
			}
			else if(jsonDat.type == "DS_LIST")
			{
				// console.log(jsonDat);
				var opt = new Array();
				for(i in jsonDat.data)
				{
					opt[i] = jsonDat.data[i];
				}
				init_select('alldsname',opt);
			}
		
		}

		socket_scan.onclose = function() 
		{
			document.getElementById("wsdi_statustd").style.backgroundColor = "#ff4040"; //#15"#40ff40"
			document.getElementById("wsdi_txt").textContent = "已断开扫描仪"; 
			//document.getElementById("brow_txt").textContent =  BrowserDetect.browser + " " + BrowserDetect.version + " " +  BrowserDetect.OS ;
		}
	} catch(exception) 
	{
		alert('<p>Error' + exception);
	}
	function settings()
	{
		
	}
	
//	function GetVal(id)
//	{
//		var obj = document.getElementById(id);
//		var txt=obj.options[obj.selectedIndex].text; //文本
		//var val=obj.options[obj.selectedIndex].value; //值
//		return txt;
		//alert(txt+"_"+val);
//	}
	
//	function getSelectedValue(id){
//		var val,obj,index;
//		obj = document.getElementById(id);
//		if(obj!= null ){
//			index = obj.selectedIndex;
//			val = obj.options[index].text;
//			return val;
//		}
//		else
//			return "";
//	}
	function getSelectedCheck(id){
		var obj = document.getElementById(id);
		if(obj != null){
			var val = obj.checked;
			//alert(val);
			if(val == true)
				return "true";
			else
				return "false";
		}
		return "false";
	}
	function getdslist()
	{
		// console.log("123456")
		var DsList = 
		{
		"type":"CMD_ORDER",
		"cmd":"get_ds_list"
		};
		socket_scan.send(JSON.stringify(DsList));
	}
	function post()
	{
		//post 文件
		jsonPost = 
		{
			"type":"CMD_ORDER",
			"cmd" :"POST",
			"url":"http://172.16.8.210:8080/UnisUploadDemo/UploadServlet",
			"file":"C:\\Users\\UNISCAN\\Desktop\\temp-image\\IMAGE0000.JPG"
		}
		jsonPost.file = saved_file;
		socket_scan.send(JSON.stringify(jsonPost));
	}
	function scan()
	{	
		scanner =
		{
		    'type':'SCAN_SETTING',
			//'ds':"TWAIN2 FreeImage SoftWare Scanner", //defualt ds,
			'scan_model':0,      	
			'color_model':2,        
			'show_ui':0,  
			'dpi':200,                    
			'file_format':'JPG', 
			'jpg_compression':64,
			'path_to_save':'default', 
			'file_name':'IMG',      
			'index':1,
			'encode_base64':1
		};
//		scanner.file_format = GetVal('filetype');
		scanner.file_format = 'JPG'
//		scanner.ds = getSelectedValue('alldsname');
		scanner.ds = "Uniscan Qi-Scanner II-TWAIN"
		// console.log(scanner)
		socket_scan.send(JSON.stringify(scanner));
		// console.log(imgBase64)
	}
	/*ss*/
	function selectfilepath(){
		var select_cmd = 
		{
			"filepath":"select"
		}; //+ CRJ 2016-11-23
		socket_scan.send(JSON.stringify(select_cmd));
	}
	
	function init_select(className,options) {
        //var options = ['100', '90', '80', '70', '60', '50', '40', '30', '20', '10'];
        var sele = document.getElementsByTagName("select");
        var option;
        var value;
        for (var i = 0; i < sele.length; i++) {
			if (sele[i].className == className) {
				sele[i].innerHTML = '';
				value = sele[i].getAttribute("para.value");
				for (var j = 0; j < options.length; j++) {
					option = document.createElement("option");
					option.value = options[j];
					option.innerHTML = options[j];
					if (value == options[j]) {
						option.selected = "selected";
					}
					sele[i].appendChild(option);
				}
			}
        }

    }
	</script>

</html>